<template>
  <div class="home">
    <div class="home-header">
      <div class="home-left">
        <img src="../assets/images/logo/logo.png" alt="" />
      </div>
      <div class="home-right">
        <router-link :to="carturl">
          <van-badge :content="cartnum">
            <van-icon name="cart-o" />
          </van-badge>
        </router-link>

        <router-link :to="userurl">
          <img class="usercover" v-if="isuser" :src="uCover" alt="" />
          <van-icon v-if="!isuser" name="manager-o" />
        </router-link>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
@import "../static/comman.css";
.usercover {
  border-radius: 70px;
}
.home {
    display: flex;
    align-items: center;
  box-sizing: border-box;
  height:0px;
  width: 375px;
  padding: 10px 0px;
}
.home-header {
  //   box-sizing: border-box;
  box-sizing: border-box;
  width: 375px;
//   margin: 0px auto;
 padding: 0px 10px;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0px;

  background-color: #fff;
  z-index: 1000;
  .home-left {
    // width: 60px;
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: left;
    align-items: center;
    img {
      height: 50px;
      width: 70px;
      //   border-radius: 70px;
    }
    span {
      width: 100px;
      display: block;
      position: absolute;
      font-size: 3px;
      font-weight: 900;
      background-color: #fff;
      color: #777;

      // margin-left: px;
      margin-top: 40px;
      // margin-right: -140px;
    }
  }
  .home-right {
    display: flex;

    justify-content: space-between;
    width: 80px;
    // flex-grow: 1;
    box-sizing: border-box;
    // margin-right: -165px;
    margin-top: 20px;

    img {
      width: 30px;
      height: 30px;
      display: block;
      border: 5px solid #ccc;
    }

    .child {
      width: 40px;
      height: 40px;
      background: #f2f3f5;
      border-radius: 4px;
    }
    span {
      font-size: 14px;
      color: #777;
    }
    // width: 150px;
    //  background-color: red;
  }
}
</style>
<script>
import { querygoodsFunc } from "../http/request";
import { Dialog } from "vant";
import Vue from "vue";
Vue.use(Dialog);
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      cartnum: 0,
      // userurl,
      isuser: false,
      uCover: "",
    };
  },
  watch:{
       cartnum(){
         
       }
  },
  computed: {
    carturl() {
      if (localStorage.userid != "") {
        return "/mycart";
      } else {
        // console.log( this.uCover);
        Dialog({
          title: "请您先进行登录",
        }).then(() => {
          return "/login";
        });
      }
    },
    userurl() {
      if (localStorage.userid != "") {
        return "/usercenter";
      } else {
        // console.log( this.uCover);
        return "/login";
      }
    },
  },

  created() {
    //   获取购物车里面的商品数量
    querygoodsFunc("/mycart", {
      uid: localStorage.getItem("userid"),
    }).then((data) => {
      console.log("购物车数据获取成功", (this.cartnum = data.length));
      // console.log();
    });
    // 设置用户图片
    if (localStorage.getItem("userid") != "") {
      this.uCover = localStorage.getItem("usercover");
      console.log("用户图像", this.uCover);
      this.isuser = true;
    }
  },
};
</script>
